<template>
  <div class="tdtContainer" :style="{ height: divHeight + 'px' }">
    <div class="inner">
      <div class="column">
        <el-input v-model="input" placeholder="旅行社名称" />
      </div>
      <div class="column">
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
      <div class="column">
        <el-button type="primary" @click="showResults">显隐结果</el-button>
      </div>
    </div>
    <div class="result" v-show="showRes">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item v-for="(item, index) in data" :key="index" :title="item.fieldValues[3]" :name="index.toString()">
          <div class="resData">详细地址：{{ item.fieldValues[4] }}</div>
        </el-collapse-item>
      </el-collapse>
      <el-alert title="对不起！您的查询结果为空" type="error" v-show="resNull" />
    </div>
  </div>
</template>

<script>
import bus from '@/utils/bus.js'
import { ref } from 'vue'
export default {
  name: 'Search',
  setup() {},
  data() {
    return {
      input: '',
      resNull: false,
      showRes: false,
      isUp: false,
      divHeight: 25, // 初始高度
      targetHeight: 320, // 目标高度
      luxingsheDataUrl: '/data-SiChuan/rest/data/featureResults.json?returnContent=true',
      luxingsheDataOption: {
        getFeatureMode: 'SQL',
        datasetNames: ['SiChuan:旅行社名录'],
        maxFeatures: 5,
        queryParameter: {
          sortClause: null,
          ids: null,
          name: null,
          attributeFilter: "旅行社中文名称 LIKE '%旅行社%'",
          groupClause: null,
          linkItems: null,
          joinItems: null,
          fields: null
        }
      },
      data: [],
      activeName: ''
    }
  },
  methods: {
    async search() {
      this.resNull = false
      if (!this.isUp) {
        this.divHeight = 25
        this.targetHeight = 320
        this.isUp = !this.isUp

        setTimeout(() => {
          this.showRes = !this.showRes
        }, 500)

        let currentHeight = this.divHeight
        let step = (this.targetHeight - currentHeight) / 10 // 每步增加的高度，可根据需要调整

        let interval = setInterval(() => {
          currentHeight += step
          this.divHeight = currentHeight

          if (currentHeight == this.targetHeight) {
            clearInterval(interval) // 达到目标高度后停止循环
          }
        }, 1) // 每 10ms 执行一次
      }

      this.luxingsheDataOption.queryParameter.attributeFilter = `旅行社中文名称 LIKE '%${this.input}%'`

      const { data: res } = await this.$http.post(this.luxingsheDataUrl, this.luxingsheDataOption)

      this.data = res.features

      if (res.features.length === 0) {
        this.resNull = !this.resNull
      }
    },

    showResults() {
      if (this.isUp) {
        this.divHeight = 320
        this.targetHeight = 25
        this.isUp = !this.isUp
        this.showRes = !this.showRes
      } else {
        this.divHeight = 25
        this.targetHeight = 320
        this.isUp = !this.isUp

        setTimeout(() => {
          this.showRes = !this.showRes
        }, 500)
      }

      let currentHeight = this.divHeight
      let step = (this.targetHeight - currentHeight) / 10 // 每步增加的高度，可根据需要调整

      let interval = setInterval(() => {
        currentHeight += step
        this.divHeight = currentHeight

        if (currentHeight == this.targetHeight) {
          clearInterval(interval) // 达到目标高度后停止循环
        }
      }, 1) // 每 10ms 执行一次
    }
  }
}
</script>

<style lang="less" scoped>
.tdtContainer {
  display: flex;
  width: 280px;
  // height: 25px;
  border: 10px solid pink;
  border-width: 51px 38px 20px 132px;
  border-image-source: url(../../assets/images/border.png);
  border-image-slice: 51 38 20 132;
  transition: height 0.5s linear; /* 添加高度变化的过渡效果 */
}

.tdtContainer1 {
  height: 320px;
}

.inner {
  position: absolute;
  display: flex;
  top: 6px;
  left: 8px;
  width: 470px;
  height: 20px;
  .column:nth-child(1) {
    flex-basis: 50%;
    margin-right: 8px;
  }

  .column:nth-child(2) {
    flex-basis: 15%;
    margin-right: 8px;
  }
  .column:nth-child(3) {
    flex-basis: 30%;
    margin-right: 8px;
  }
}
.result {
  position: absolute;
  top: 52px;
  left: 15px;
  height: 350px;
  width: 420px;
  border-radius: 50%;
  .el-collapse {
    border-radius: 50%;
  }
}
.resData {
  color: red; /* 设置文字颜色为红色 */
  font-style: italic; /* 设置文字为斜体 */
}
</style>
